<template>
    <div class="content-box">
        <el-form ref="form" v-bind="getFormProps()" label-width="80px" class="form-body">
          <e-heading>赛事章程编辑</e-heading>
          <el-form-item 
            prop="contentTxt" 
            :rules="[
              {required: true, min: 8, max: 8000, message: '请输入8-8000个字符的章程内容'},
              Object.assign({trigger: 'blur'}, validator.rule.checkTrim, {message: '请输入8-8000个字符的章程内容'}) 
            ]" class="editorStyle">
            <e-editor v-model="content" :text.sync="form.contentTxt"/>
          </el-form-item>
          <div class="button-box">
              <el-button type="primary" @click="handleModel">使用模板</el-button>
              <el-button native-type="submit" :loading="loading">保存修改</el-button>
          </div>
        </el-form>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import EEditor from '@e-ui/Editor'
  import {form} from 'utils/mixins'
  import validator from 'utils/validator'
  import api from 'api/race'
  export default {
    mixins: [form],
    components: {
      EEditor
    },
    computed: {
      ...mapGetters({
        race_rule: 'race_rule' // 获取赛事章程内容
      }),
      content: {
        get () {
          return this.$store.getters.race_rule.constitution || this.form.content
        },
        set (value) {
          this.form.content = value
          this.$store.commit('RACE_RULE', {
            constitution: value
          })
        }
      }
    },
    data () {
      return {
        validator,
        loading: false,
        form: {
          content: '',
          contentTxt: ''
        }
      }
    },
    mounted () {
      this.$store.dispatch('race_rule', {matchId: this.$route.query.id})
    },
    methods: {
      submit () {
        api.addRule({ // 添加/修改赛事章程
          id: this.race_rule.id || '',
          matchId: this.$route.query.id,
          constitution: this.form.content
        }, {context: this, successMsg: '操作成功'}).then(res => {
          this.$router.push({
            path: '/race/detail/rule?id=' + this.$route.query.id +
            '&tasktype=' + this.$route.query.tasktype +
            '&matchtype=' + this.$route.query.matchtype +
            '&isRun=' + this.$route.query.isRun
          })
        })
      },
      handleModel () {
        api.ruleTemplate({matchType: this.$route.query.matchtype}).then(res => {
          // console.log(res.data.length)
          if (res.data.length > 0) {
            this.content = res.data[0].matchTemplateValue
          }
        })
      }
    }
  }
</script>

<style scoped>
.editorStyle {
  margin-left: -80px;
}
</style>
